<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>伪类</title>
    <style>
        /*选中的是勾选的复选框,不能改变颜色 ，改变颜色都是用checkbox+div模拟出来的*/
        input:checked {
            width: 100px;
            height: 100px;
        }

        /*选中是 可用与不可用的input */
        input:disabled {
            background-color: gray;
        }

        input:enabled {
            background-color: green;
        }

        div {
            background-color: gray;
            width: 600px;
            height: 300px;
        }

        /*目标伪类,选中锚点所指向元素 */
        div:target {
            background-color: green;
        }
        /*语言伪类用的不多，平时不要随便用*/
        /*注意，默认所有元素lang都是html的lang值 */
        div:lang(en){
            background-color: chocolate;
        }
        /*所有en都改成blue,优先级不如div:lang,大范围不如小范围 */
        :lang(en){
            background-color: blue;
        }
    </style>
</head>
<body>
<!--<div>-->
<!--    <input type="checkbox">-->
<!--    <input type="radio" name="gender">-->
<!--    <input type="radio" name="gender">-->
<!--    <input type="text">-->
<!--    <input type="text" disabled>-->
<!--</div>-->
<a href="#d1">跳转到第1个</a>
<a href="#d2">跳转到第2个</a>
<a href="#d3">跳转到第3个</a>
<a href="#d4">跳转到第4个</a>
<a href="#d5">跳转到第5个</a>
<a href="#d6">跳转到第6个</a>
<div id="d1">第1个</div>
<br>
<div id="d2">第2个</div>
<br>
<div id="d3">第3个</div>
<br>
<div id="d4">第4个</div>
<br>
<div id="d5">第5个</div>
<br>
<div id="d6">第6个</div>
<br>

<div lang="en">尚硅谷</div><br>
<div>atguigu</div>
<p>前端</p>
<span lang="en">你好</span>
</body>
</html>